<template>
  <div
    class='pr'
    style="width:100%;height:100%;"
  >
    <div
      id='echart6'
      style="width:23vw;height:40vh;"
    ></div>
    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { init, graphic } from "echarts";
import RepairViewList from "./RepairViewList.vue";
export default {
  name: "box6",
  props: {
    chooseBatch: String,
  },
  components: {
    RepairViewList,
  },
  data: function () {
    return {
      flag: 2,
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list: [
        { EqAmountRangeCategoryText: "1万以下", Proportion: 0.1 },
        { EqAmountRangeCategoryText: "1-50万", Proportion: 0.58 },
        { EqAmountRangeCategoryText: "50-100万", Proportion: 0.58 },
        { EqAmountRangeCategoryText: "100万以上", Proportion: 0.64 },
      ],
    };
  },

  myChart: null,
  mounted() {
    // this.columns = await getColumns("RepairViewListModel");
    // this.getData()
    this.initCharts();
  },
  methods: {
    initCharts() {
      // const data = await this.$http.get(
      //   `/api/RepairReport/RepairLargeScreenModelHList?flag=${this.flag}`
      // );
      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart6"));
        // this.myChart.on("click", (ev) => {
        //   this.filters = [
        //     {
        //       Name: "ApplyTime",
        //       compare: ">=",
        //       value: ev.data.Ds,
        //     },
        //     {
        //       Name: "ApplyTime",
        //       compare: "<",
        //       value: ev.data.De,
        //     },
        //     {
        //       Name: "Dept_Id",
        //       compare: "==",
        //       value: ev.data.Dept_Id,
        //     },
        //   ];
        //   this.sub_title = `日期起:${ev.data.Ds.substring(
        //     0,
        //     10
        //   )} 日期止:${ev.data.De.substring(0, 10)} 科室:${ev.data.DeptName}`;
        //   this.dialog_visible = true;
        // });
      }
      const option = {
        grid: {
          top: 95,
          let: 24,
          right: 13,
          bottom: 53,
        },
        title: [
          {
            text: "设备盘点准确率",
            subtext: "(单位:%)",
            top: 16,
            left: 24,
            textStyle: {
              color: "#d6e2ff",
              fontSize: 18,
              fontWeight: 400,
              fontFamily: "Microsoft YaHei",
            },
            subtextStyle: {
              color: "#d6e2ff",
              fontSize: 14,
              fontWeight: 400,
              fontFamily: "Microsoft YaHei",
            },
          },
        ],
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            hideOverlap: true,
            color: "#d6e2ff",
          },
          axisLine: {
            lineStyle: {
              color: "#153158",
            },
          },
          data: this.list.map((v) => v.EqAmountRangeCategoryText),
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#153158",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#153158",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#d6e2ff",
            },
          },
          max: 100,
        },
        series: [
          {
            type: "bar",
            name: "盘点精准率",
            color: "#0ff5f8",
            barWidth: 16,
            barGap: 0,
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 从上到下变浅
                  [
                    {
                      offset: 0,
                      color: "#0596ff",
                    },
                    {
                      offset: 1,
                      color: "#38dbff",
                    },
                  ],
                  false
                ),
                opacity: 1,
              },
            },
            label: {
              show: true,
              color: "#d6e2ff",
              position: "top",
              formatter: (e) => (e.data || 0) + "%",
            },
            data: this.list.map((i) => (i.Proportion * 100).toFixed(2)),
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    getData() {
      this.$http
        .get(
          `/api/StocktakingAccountReport/StocktakingReportF/${
            this.chooseBatch || ""
          }`
        )
        .then((res) => {
          this.list = res;
          this.initCharts();
        });
    },
    resize() {
      this.myChart.resize();
    },
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
    chooseBatch() {
      this.getData();
    },
  },
};
</script>

<style>
</style>